<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    // 同源策略: 没有跨域的限制，可以随意请求，比如浏览器、script、img、link、iframe、....都是同源策略
    // 非同源策略：有跨域的限制，ajax请求就是同源策略


    // 同源策略 : 协议 域名 端口号 都一样就是同源
    // 非同源策略: 协议 域名 端口号有一个不一样，就是非同源

    // 在什么时候会遇到跨域
    // 1、web服务器和数据服务器没有部署到一起的时候
    // 2、当本地开发完去连接测试服务器的时候
    // 3、去请求第三方接口的时候
    // 现在在工作中使用最多的三种跨域就是 jsonp、cors、proxy，但是jsonp有很多缺点，现在有一些来项目里还存在jsonp，新的项目已经没有了

    let xhr = new XMLHttpRequest;
    xhr.open('get', 'http://127.0.0.1:8080/list');
    xhr.onreadystatechange = function () {
      if (xhr.status === 200 && xhr.readyState === 4) {
        console.log(xhr.responseText);
      }
    };
    xhr.send();

      // Access to XMLHttpRequest at 'heep://127.0.0.1:8080/list' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
      
      // 遇见这种错误就是跨域了
  </script>
</body>

</html>